<!DOCTYPE html>
<html>
<head>
    <base href="">
    <meta name="referrer" content="never">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- IE浏览器兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 手机端表格必备！！！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>超声图像超分辨率重建系统</title>

    <!-- bootstrap3 必备-->

    <link rel="stylesheet"
          href="static/js/bootstrap-3.3.5/bootstrap-3.3.5-dist/css/bootstrap.min.css" />

    <link href="static/css/nav-slide.css">
    <link rel="stylesheet" href="static/js/jqueryui/jquery-ui.min.css" />
    <!-- 外部样式 必备-->
    <link rel="stylesheet" href="static/css/style.css" />
    <!-- 内部样式 必备-->
    <link rel="stylesheet" href="static/css/newCSS_wang.css" />
    <!-- 字体样式 删除未见明显异常-->
    <link rel="stylesheet" href="static/css/font-awesome.min.css" />
    <!-- 日期控件样式 -->
    <link rel="stylesheet" href="static/css/huaxin.css" />
</head>
<body>
<!-- 右侧内容 -->
<div class="container1" style="background-color: #f4f4f4;">
    <!-- 面板标题 -->
    <div class="appmaincnttop">
        <div class="row">
            <div class="col-sm-5 top-title">重建结果展示</div>
            <div class="col-sm-7 top-op">
                <!-- 路径导航 -->
                <div class="history">
                    当前位置：
                    <span>超分辨率重建</span>
                    <i class="fa fa-angle-right" aria-hidden="true"></i>
                    <span>重建结果展示</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 面板内容 -->
<div class="SC-contBox container1">
    <div class="SC-cont">
        <!-- 内部面板标题 -->
        <div class="SC-tab">
            <div class="SC-stuInfoL floatL clear col-md-4">
                <div style="margin-top: 15px;">重建结果</div>
            </div>
            <!--<div class="SC-tabR floatR clear">-->
            <!--<input type="submit" value="知识点查询" class="btn"/>-->
            <!--<a href="" class="clearCont floatR">清空</a>-->
            <!--</div>-->
            <div class="clearfloat"></div>
        </div>
        <!-- 内部面板内容 -->
        <div class="tabL">
            <div class="container-fluid SC-fluid">
                <div class="panel panel-primary col-sm-4 col-sm-offset-1">
                    <div class="panel-heading" style="background-color: #FFC000">
                        <h3 class="panel-title">PSNR</h3>
                    </div>
                    <div class="panel-body">
                        <h4 id="allDsCount"></h4>
                        <!--                        当前有系统数据集:<span id="hasSystemDs"></span>&nbsp;&nbsp;-->
                        <!--                        当前有私人数据集:<span id="hasPrivateDs"></span>-->
                        <br/>
                    </div>
                </div>
                <div class="panel panel-primary col-sm-4 col-sm-offset-1">
                    <div class="panel-heading" style="background-color: #FFC000">
                        <h3 class="panel-title">SSIM</h3>
                    </div>
                    <div class="panel-body">
                        <h4 id="allSrgm"></h4>
                        <!--                        当前有系统模型:<span id="hasSystemModel"></span>&nbsp;&nbsp;-->
                        <!--                        当前有私人模型:<span id="hasPrivateModel"></span>-->
                        <br/>
                    </div>
                </div>
                <div class="panel panel-primary col-sm-4 col-sm-offset-1">
                    <div class="panel-heading" style="background-color: #FFC000">
                        <h3 class="panel-title">用户总数</h3>
                    </div>
                    <div class="panel-body">
                        <h4 id="allUser"></h4>
                        当前有用户数:<span id="hasUser"></span>&nbsp;
                        <br/>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <!-- 内部面板第二个标题 -->
            <div class="box-content box-nomargin">
                <div class="SC-stuInfo container-fluid bgf8 clear">
                    <div class="row clear">
                        <div class="SC-stuInfoL floatL clear col-md-4">
                            <div class="SC-stuInfoLL floatL">结果展示</div>
                        </div>
                        <div class="SC-stuInfoR floatL col-md-8"
                             style="text-align: right;">
                            <!--<input type="submit" value="所属课程录入" onclick="updateFormActionProp('${pageContext.request.contextPath}/course/list?form');" class="btn"/>-->
                            <!--<input type="submit" value="知识点分类录入" onclick="updateFormActionProp('${pageContext.request.contextPath}/knowledgePointClassify/list?form');" class="btn"/>-->
                            <!--<input type="submit" value="知识点录入" class="btn"/>-->
                        </div>
                    </div>
                    <div class="clearfloat"></div>
                </div>
                <div class="table-responsive">
                    <table class='table table-striped SC-table'>
                        <thead>
                        <tr>
                            <th>原始超声图像</th>
                        </tr>
<!--                        <input type="file" value="" name="image[]" id="image" multiple="multiple">-->

                       <input type="file" id="file" name="file" multiple="multiple"/>


                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div style="height: 700px;" id="fitChart">
                                    <!--<img src="static/images/loginBg.jpg"/>-->
                                </div>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="table-responsive">
                    <table class='table table-striped SC-table'>
                        <thead>
                        <tr>
                            <th>重建图像</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                <div style="height: 400px;" id="reChart">
                                    <!--<img src="static/images/loginBg.jpg"/>-->
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="static/js/jquery-3.1.1.js"></script>
<script src="static/lib/echarts/echarts-all.js"></script>
<script src="js/layerOperation.js"></script>
<script src="js/common.js"></script>
<script src="js/plotFigure.js"></script>
<script src="js/introduce.js"></script>
<script type="text/javascript">
    function ProcessFile(e) {
        var arr = document.getElementById('file').files;
        var arrTwo = arr;
        for(var i=0;i<arr.length;i++){
            var file = arr[i];
            var path ='./test/';
            if (file) {
                var reader = new FileReader();
                reader.onload = function (event) {
                    var txt = event.target.result;
                    var img = document.createElement("img");
                    img.src = txt;//将图片base64字符串赋值给img的src
                    document.getElementById("fitChart").appendChild(img);


                };
            }
            debugger;
            var name = file.name;
            var imgTwo = document.createElement("img");
            debugger;
            imgTwo.src = path +"test_"+file.name;
            document.getElementById("reChart").appendChild(imgTwo);
            reader.readAsDataURL(file);
        }
    }

    function contentLoaded() {
        document.getElementById('file').addEventListener('change',
            ProcessFile, false);
    }
    window.addEventListener("DOMContentLoaded", contentLoaded, false);
</script>
</body>
</html>